body {
  background: #17203d url(../img/bg.png) no-repeat;
}
.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 625px;
  overflow: hidden;
}
.scene > div {
  position: absolute;
}
.scene .star {
  width: 100%;
  height: 511px;
  background: url(../img/sart.png) no-repeat center;
}
.scene .ball {
  width: 100%;
  height: 617px;
  background: url(../img/ball.png) no-repeat center;
}
.warp {
  position: relative;
  margin: 0 auto;
  width: 1000px;
}
.s {
  background: url(../img/s.png) no-repeat;
}
.t-line {
  background: url(../img/time.png) no-repeat;
}
.w-icon {
  background: url(../img/works.png) no-repeat;
}
.info {
  margin-top: 180px;
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-animation: info 1s ease  1 forwards;
          animation: info 1s ease  1 forwards;
}
.info .head {
  position: relative;
  margin: 0 auto;
  width: 347px;
  height: 290px;
  background: url(../img/head.png) no-repeat;
}
.info .head span {
  position: absolute;
  left: 60px;
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 20px;
  font-family: Arial;
  background-color: #fff;
  border-radius: 50%;
  border: 3px solid #354b89;
}
.info .name {
  margin: 30px auto 0;
  width: 177px;
  height: 50px;
  font-size: 0;
  background: url(../img/s.png) no-repeat;
}
.info .contact {
  position: relative;
  margin: 50px auto 0;
  padding: 0 30px;
  width: 800px;
  height: 43px;
  line-height: 43px;
  background-color: #1e2b51;
  border-radius: 10px;
  color: #5c74c0;
  font-size: 15px;
  font-family: \5fae\8f6f\96c5\9ed1;
}
.info .contact .item {
  margin-right: 46px;
}
.info .contact span:last-of-type {
  margin-right: 0;
}
.info .contact a {
  text-decoration: none;
  color: #5c74c0;
}
.info .contact .tg {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  border-color: transparent transparent #1e2b51 transparent;
  border-style: dashed dashed solid dashed;
  border-width: 0 9px 9px 9px;
}
@-webkit-keyframes info {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes info {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.tit {
  font-family: \5fae\8f6f\96c5\9ed1;
  font-size: 30px;
  color: #d7def3;
  text-align: center;
}
.say {
  position: relative;
  margin: 200px auto;
}
.say span {
  position: absolute;
}
.say .circle {
  top: -5px;
  left: 210px;
  z-index: 10;
  display: inline-block;
  width: 6px;
  height: 4px;
  border-bottom: 16px solid #2a3965;
  border-bottom-left-radius: 100%;
  -webkit-transform: rotate(-44deg);
          transform: rotate(-44deg);
}
.say .circle2 {
  z-index: 10;
  top: -43px;
  left: 195px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #82889d;
  font-size: 20px;
  font-family: \5fae\8f6f\96c5\9ed1;
  border-radius: 50%;
  background-color: #2a3965;
}
.say .circle3 {
  top: 0px;
  left: 211px;
  z-index: 9;
  display: inline-block;
  width: 6px;
  height: 4px;
  border-bottom: 16px solid #1e2b51;
  border-bottom-left-radius: 100%;
  -webkit-transform: rotate(-44deg);
          transform: rotate(-44deg);
}
.say .circle4 {
  z-index: 9;
  top: -48px;
  left: 190px;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #1e2b51;
}
.say .txt {
  font-size: 25px;
}
.say .txt:before {
  position: absolute;
  left: 745px;
  top: -21px;
  content: '';
  width: 60px;
  height: 80px;
  background: url(../img/bz.png) no-repeat;
  background-size: 64px 73px;
}
.tool .tool-cont {
  margin: 0  auto;
  overflow: hidden;
  width: 824px;
}
.tool ul {
  margin: 110px auto 0;
  width: 1000px;
  overflow: hidden;
}
.tool ul li {
  display: inline-block;
  margin-right: 130px;
  margin-bottom: 40px;
  float: left;
  width: 188px;
  height: 80px;
  background: url(../img/s.png) no-repeat;
  opacity: 0;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
}
.tool ul .ps {
  background-position: -306px -165px;
}
.tool ul .st {
  background-position: -11px -83px;
}
.tool ul .git {
  background-position: -313px -80px;
}
.tool ul .fb {
  background-position: -11px -264px;
}
.tool ul .svn {
  background-position: -8px -170px;
}
.tool ul .phps {
  background-position: -306px -250px;
}
.tool-cur .ps {
  -webkit-animation: toolUp 1s ease .1s 1 forwards;
          animation: toolUp 1s ease .1s 1 forwards;
}
.tool-cur .st {
  -webkit-animation: toolUp 1s ease  .5s 1 forwards;
          animation: toolUp 1s ease  .5s 1 forwards;
}
.tool-cur .git {
  -webkit-animation: toolUp 1s ease .9s 1 forwards;
          animation: toolUp 1s ease .9s 1 forwards;
}
.tool-cur .fb {
  -webkit-animation: toolUp 1s ease .1s 1 forwards;
          animation: toolUp 1s ease .1s 1 forwards;
}
.tool-cur .svn {
  -webkit-animation: toolUp 1s ease 0.5s 1 forwards;
          animation: toolUp 1s ease 0.5s 1 forwards;
}
.tool-cur .phps {
  -webkit-animation: toolUp 1s ease .9s 1 forwards;
          animation: toolUp 1s ease .9s 1 forwards;
}
@-webkit-keyframes toolUp {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes toolUp {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
.skill {
  margin: 140px auto;
  width: 100%;
}
.skill .tit {
  margin-bottom: 70px;
}
.skill .skill-cont {
  margin-left: 35px;
  padding: 10px 10px;
  width: 906px;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
}
.skill .skill-cont span {
  position: relative;
  float: left;
  margin-right: 25px;
  width: 71px;
  height: 71px;
  border: 1px solid #fff;
  line-height: 71px;
  text-align: center;
  border-radius: 100%;
  background-color: #17203d;
  color: #d7def3;
  font-size: 18px;
}
.skill .skill-cont .less {
  border-color: #ff9d9d;
  -webkit-transform: translate(392px, 0px);
          transform: translate(392px, 0px);
  box-shadow: 0px 0px 9px #ff7878;
}
.skill .skill-cont .response {
  border-color: #ffbb78;
  -webkit-transform: translate(295px, 0px);
          transform: translate(295px, 0px);
  box-shadow: 0px 0px 9px #ffbb78;
}
.skill .skill-cont .seajs {
  border-color: #fffd57;
  -webkit-transform: translate(197px, 0px);
          transform: translate(197px, 0px);
  box-shadow: 0px 0px 9px #fffd57;
}
.skill .skill-cont .gulp {
  border-color: #a0ff60;
  -webkit-transform: translate(99px, 0px);
          transform: translate(99px, 0px);
  box-shadow: 0px 0px 9px #72ff5b;
}
.skill .skill-cont .html5 {
  z-index: 100;
  border-color: #5ef6ff;
  box-shadow: 0px 0px 9px #5ef6ff;
}
.skill .skill-cont .css3 {
  border-color: #62a5ff;
  -webkit-transform: translate(-99px, 0px);
          transform: translate(-99px, 0px);
  box-shadow: 0px 0px 9px #62a5ff;
}
.skill .skill-cont .jq {
  border-color: #ae7dff;
  -webkit-transform: translate(-197px, 0px);
          transform: translate(-197px, 0px);
  box-shadow: 0px 0px 9px #9555ff;
}
.skill .skill-cont .iconf {
  border-color: #ff86e7;
  -webkit-transform: translate(-295px, 0px);
          transform: translate(-295px, 0px);
  box-shadow: 0px 0px 9px #ff5ddf;
}
.skill .skill-cont .ajax {
  border-color: #c5cce1;
  -webkit-transform: translate(-392px, 0px);
          transform: translate(-392px, 0px);
  box-shadow: 0px 0px 9px #4b5d94;
}
.skill-cur .skill-cont {
  -webkit-animation: skillUp 2s ease  1 forwards;
          animation: skillUp 2s ease  1 forwards;
}
.skill-cur .less {
  -webkit-animation: skill 1s ease 2s 1 forwards;
          animation: skill 1s ease 2s 1 forwards;
}
.skill-cur .response {
  -webkit-animation: skill 1s ease 2.2s 1 forwards;
          animation: skill 1s ease 2.2s 1 forwards;
}
.skill-cur .seajs {
  -webkit-animation: skill .8s ease 2.4s 1 forwards;
          animation: skill .8s ease 2.4s 1 forwards;
}
.skill-cur .gulp {
  -webkit-animation: skill .6s ease 2.6s 1 forwards;
          animation: skill .6s ease 2.6s 1 forwards;
}
.skill-cur .css3 {
  -webkit-animation: skill .6s ease 2.6s 1 forwards;
          animation: skill .6s ease 2.6s 1 forwards;
}
.skill-cur .jq {
  -webkit-animation: skill .8s ease 2.4s 1 forwards;
          animation: skill .8s ease 2.4s 1 forwards;
}
.skill-cur .iconf {
  -webkit-animation: skill 1s ease 2.2s 1 forwards;
          animation: skill 1s ease 2.2s 1 forwards;
}
.skill-cur .ajax {
  -webkit-animation: skill 1s ease 2s 1 forwards;
          animation: skill 1s ease 2s 1 forwards;
}
@-webkit-keyframes skillUp {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes skillUp {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@-webkit-keyframes skill {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes skill {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
.history {
  margin-bottom: 140px;
  font-family: \5fae\8f6f\96c5\9ed1;
}
.history .tit {
  margin: 140px 0;
}
.history .h-cont {
  position: relative;
  margin: 0 auto;
  width: 350px;
  height: 350px;
}
.history .area1 {
  z-index: 59;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -46px;
  margin-left: -46px;
  width: 93px;
  height: 93px;
  border-radius: 50%;
  border: 2px solid  #505076;
  box-shadow: inset 0px 0px 4px #2a365c;
}
.history .area1:before {
  z-index: 58;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -42px;
  margin-left: -40px;
  content: "";
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #17203d;
}
.history .area1:after {
  z-index: 57;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -54px;
  margin-left: -54px;
  content: "";
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
  border-color: #505076 #505076 #505076 transparent;
  border-style: solid solid solid dashed;
  border-width: 54px 54px 54px 54px;
  border-radius: 50%;
  -webkit-transform: rotate(100deg);
          transform: rotate(100deg);
}
.history .area2 {
  z-index: 50;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -68px;
  margin-top: -68px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 12px solid #8d512d;
}
.history .area3 {
  z-index: 47;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -83px;
  margin-left: -83px;
  width: 166px;
  height: 166px;
  border-radius: 50%;
  border: 2px solid  #144a70;
}
.history .area3:after {
  z-index: 48;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -91px;
  margin-left: -91px;
  content: "";
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
  border-color: #144a70 #144a70 #144a70 transparent;
  border-style: solid solid solid dashed;
  border-width: 91px 91px 91px 91px;
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.history .area3:before {
  z-index: 49;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -77px;
  margin-left: -77px;
  content: "";
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background-color: #17203d;
}
.history .area4 {
  z-index: 37;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -103px;
  margin-left: -103px;
  width: 206px;
  height: 206px;
  border-radius: 50%;
  border: 2px solid  #608815;
}
.history .area4:after {
  z-index: 38;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -111px;
  margin-left: -111px;
  content: "";
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
  border-color: #608815 #608815 #608815 transparent;
  border-style: solid solid solid dashed;
  border-width: 111px 111px 111px 111px;
  border-radius: 50%;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.history .area4:before {
  z-index: 39;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -98px;
  margin-left: -98px;
  content: "";
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background-color: #17203d;
}
.history .area5 {
  z-index: 27;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -123px;
  margin-left: -123px;
  width: 246px;
  height: 246px;
  border-radius: 50%;
  border: 2px solid  #634e6f;
}
.history .area5:after {
  z-index: 28;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -131px;
  margin-left: -131px;
  content: "";
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
  border-color: #634e6f #634e6f transparent transparent;
  border-style: solid solid dashed dashed;
  border-width: 131px 131px 131px 131px;
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.history .area5:before {
  z-index: 29;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -118px;
  margin-left: -118px;
  content: "";
  width: 237px;
  height: 237px;
  border-radius: 50%;
  background-color: #17203d;
}
.history .time-item {
  z-index: 60;
  position: absolute;
  background: url(../img/time.png) no-repeat;
  color: #d7def3;
}
.history .time-item .time {
  font-size: 18px;
}
.history .time-item p {
  font-size: 16px;
  line-height: 20px;
}
.history .time-line1 {
  top: -10px;
  left: -230px;
  width: 395px;
  height: 158px;
  background-position: 196px 5px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.history .time-line1 .time {
  margin-left: 130px;
}
.history .time-line2 {
  top: 33px;
  left: 215px;
  padding-left: 125px;
  width: 425px;
  height: 95px;
  background-position: -279px 5px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.history .time-line2 p {
  width: 288px;
}
.history .time-line3 {
  top: 170px;
  left: -275px;
  width: 382px;
  height: 61px;
  background-position: 248px -175px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.history .time-line3 span {
  margin-left: 110px;
}
.history .time-line3 p {
  width: 245px;
}
.history .time-line4 {
  top: 273px;
  left: 207px;
  padding-top: 18px;
  padding-left: 85px;
  width: 395px;
  height: 70px;
  background-position: -322px -165px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.history .time-line5 {
  top: 293px;
  left: -285px;
  padding-top: 85px;
  width: 478px;
  height: 126px;
  background-position: 376px -247px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.history .time-line5 span {
  margin-left: 237px;
}
.h-cur .area1:after {
  -webkit-animation: areaRotate 1s ease 0.1s 1 forwards;
          animation: areaRotate 1s ease 0.1s 1 forwards;
}
.h-cur .area3:after {
  -webkit-animation: areaRotate2 1s ease 0.2s 1 forwards;
          animation: areaRotate2 1s ease 0.2s 1 forwards;
}
.h-cur .area5:after {
  -webkit-animation: areaRotate 1s ease 0.4s 1 forwards;
          animation: areaRotate 1s ease 0.4s 1 forwards;
}
.h-cur .time-line1 {
  -webkit-animation: max 1s ease 1.2s 1 forwards;
          animation: max 1s ease 1.2s 1 forwards;
}
.h-cur .time-line2 {
  -webkit-animation: max 1s ease 1.4s 1 forwards;
          animation: max 1s ease 1.4s 1 forwards;
}
.h-cur .time-line3 {
  -webkit-animation: max 1s ease 1.8s 1 forwards;
          animation: max 1s ease 1.8s 1 forwards;
}
.h-cur .time-line4 {
  -webkit-animation: max 1s ease 2.1s 1 forwards;
          animation: max 1s ease 2.1s 1 forwards;
}
.h-cur .time-line5 {
  -webkit-animation: max 1s ease 2.5s 1 forwards;
          animation: max 1s ease 2.5s 1 forwards;
}
@-webkit-keyframes areaRotate {
  100% {
    -webkit-transform: rotate(179deg);
            transform: rotate(179deg);
  }
}
@keyframes areaRotate {
  100% {
    -webkit-transform: rotate(179deg);
            transform: rotate(179deg);
  }
}
@-webkit-keyframes areaRotate2 {
  100% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@keyframes areaRotate2 {
  100% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@-webkit-keyframes areaRotate3 {
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@keyframes areaRotate3 {
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@-webkit-keyframes max {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    opacity: 1;
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes max {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    opacity: 1;
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.works {
  margin: 350px 0;
}
.works .tit {
  margin-bottom: 90px;
}
.works ul {
  margin: 0 auto;
  width: 816px;
  overflow: hidden;
}
.works ul li {
  float: left;
  width: 408px;
  color: #d7def3;
  font-family: \5fae\8f6f\96c5\9ed1;
}
.works ul li .w-icon {
  float: left;
  margin-right: 10px;
  width: 108px;
  height: 110px;
}
.works ul li .w-tit {
  display: inline-block;
  margin-top: 10px;
  font-size: 20px;
}
.works ul li a {
  display: block;
  color: #d7def3;
  font-size: 16px;
  margin-top: 20px;
}
.works ul .css-icon {
  background-position: -132px -3px;
}
.footer {
  width: 100%;
  height: 80px;
  background-color: #fcf5f2;
}
.footer .f-cont {
  margin: 0 auto;
  width: 1000px;
  color: #666;
  font-size: 20px;
  line-height: 80px;
  text-align: center;
}
